<template>
  <div>
    <div class="cartControl">
      <transition name="move">
        <!-- 数量减少 -->
        <div 
        class="cart-minus" 
        v-if="food.count" 
        @click.stop="updateFoodCount(false)"
        >
        </div>
      </transition>
      <!-- 商品数量 -->
      <div class="cart-count" v-if="food.count">
        {{food.count}}
      </div>

      <!-- 数量增加 -->
      <div class="cart-add" @click.stop="updateFoodCount(true)"></div>
    </div>
  </div>
</template>


<script>
export default {
  name: "CartControl",
  props: {
    food: Object
  },
  methods: {
    updateFoodCount(isAdd) {
      this.$store.dispatch("updateFoodCount", { isAdd, food: this.food });
    }
  }
};
</script>

<style lang="scss" scoped>
.cartControl {
  width: 60px;
  height: 20px;
  padding: 2px;
  .cart-minus,
  .cart-add {
    width: 16px;
    height: 16px;
    border-radius: 50%;
  }
  .cart-minus {
    background: url(./imgs/minus.svg) #ff8c01 no-repeat center;
    background-size: 12px 12px;
    float: left;
    &.move-enter-active,
    &.move-leave-active {
      transition: all 0.3s;
    }
    &.move-enter,
    &.move-leave-to {
      opacity: 0;
      transform: translateX(15px) rotate(180deg);
    }
  }
  .cart-add {
    background: url(./imgs/add.svg) #ff8c01 no-repeat center;
    background-size: 12px 12px;
    float: right;
  }
  .cart-count {
    float: left;
    width: 24px;
    height: 16px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 16px;
    text-align: center;
  }
}
</style>


